<template>
    <div>
        <!--module2 goods-add page  商品发布页-->

        <el-form ref="form" :model="form" label-width="80px">
            <div v-if="str==='0'">
                <el-form-item label="编号">
                    <el-input v-model="form.number"></el-input>
                </el-form-item>
                <el-form-item label="昵称">
                    <el-input v-model="form.nickName"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="form.mobile"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="form.age"></el-input>
                </el-form-item>
                <el-form-item label="身高/cm">
                    <el-input v-model="form.height"></el-input>
                </el-form-item>
                <el-form-item label="体重/kg">
                    <el-input v-model="form.weight"></el-input>
                </el-form-item>
                <el-form-item label="胸围">
                    <el-input v-model="form.bust"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="form.type" placeholder="类型" style="width:150px;">
                        <el-option label="清纯" value="1"></el-option>
                        <el-option label="萝莉" value="2"></el-option>
                        <el-option label="御姐" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="头像">
                    <img :src="form.head+'?x-oss-process=image/resize,w_80,h_80'" alt="" style="display:inline-block;vertical-align:bottom;width: 80px;height: 80px;border: 1px solid #eee;">
                    <upload @upload="upCallback1"></upload>
                </el-form-item>
                <el-form-item label="自我介绍">
                    <el-input v-model="form.introduce"></el-input>
                </el-form-item>
            </div>
            <template v-if="str==='3'">
                <el-form-item label="服务项目">
                    <template>
                        <div v-for="v in form.prices">
                            <el-select v-model="v.girlProjectVo['id']" placeholder="选择服务项目" style="width:150px;" @change="chang(v)">
                                <el-option v-for="v1 in projectList" :key="v1.id" :label="v1.projectName" :value="v1.id"></el-option>
                            </el-select>
                            <el-input type="number" v-model="v.price" style="width: 180px;" placeholder="输入项目价格"></el-input>
                        </div>
                        <div><i class="el-icon-lx-roundaddfill" style="font-size: 1.2rem;color: #409EFF;" @click="pushPro"></i></div>
                    </template>
                </el-form-item>
            </template>
            <template v-if="str==='1'">
                <el-form-item label="照片">
                    <div>
                        <i style="font-size: 0.8rem;color: red;">可选多张</i>
                        <uploadList @upload="upCallback"></uploadList>
                        <!--<el-button><i class="el-icon-upload2"></i> 上传头像</el-button>-->
                    </div>
                    <div v-if="showMedia">
                        <!--{{form.imgList[0].rename}}-->
                        <div v-for="(v,index) in form.photos">
                            <img :src="(v.photoUrl||v.img_url)+'?x-oss-process=image/resize,w_80,h_80'" alt=""
                                 style="display:inline-block;vertical-align:bottom;width: 80px;height: 80px;border: 1px solid #eee;">
                            <span @click="v.free=!v.free">
                                <i class="el-icon-lx-attentionfill" v-if="!v.free" style="font-size: 1rem;color: #409EFF;"></i>
                                <i class="el-icon-lx-attentionforbid" v-if="v.free"></i>
                            </span>
                            <input type="number" v-model="v.payGold" placeholder="所需金币">
                            <i class="el-icon-delete" @click="del(v,index)"></i>
                        </div>
                    </div>
                </el-form-item>
            </template>
            <template v-if="str==='2'">
                <el-form-item label="视频">
                    <div>
                        <uploadv @upload="upCallbackv"></uploadv>
                        <!--<el-button><i class="el-icon-upload2"></i> 上传视频</el-button>-->
                    </div>
                    <br>
                    <div v-if="showMedia">
                        <!--{{form.imgList[0].rename}}-->
                        <div v-for="v in form.videoes">
                            <video v-if="v.videoUrl" width="180" height="140" controls>
                                <source :src="v.videoUrl" type="video/mp4">
                                您的浏览器不支持 HTML5 video 标签。
                            </video>
                            <!--<video :src="(v.rename||v.img_url)+'?x-oss-process=image/resize,w_80,h_80'" alt=""-->
                                   <!--style="display:inline-block;vertical-align:bottom;width: 80px;height: 80px;border: 1px solid #eee;"></video>-->
                            <span @click="v.free=!v.free">
                                <i class="el-icon-lx-attentionfill" v-if="!v.free" style="font-size: 1rem;color: #409EFF;"></i>
                                <i class="el-icon-lx-attentionforbid" v-if="v.free"></i>
                            </span>
                            <input type="number" v-model="v.payGold" placeholder="所需金币">
                        </div>
                    </div>
                    <!--<div>-->
                        <!--<video v-for="v in form.videoes"-->
                             <!--:src="(v.rename||v.img_url)+'?x-oss-process=image/resize,w_80,h_80'"-->
                             <!--style="display:inline-block;vertical-align:bottom;width: 80px;height: 80px;border: 1px solid #eee;">-->
                        <!--</video>-->
                    <!--</div>-->
                </el-form-item>
            </template>

            <el-form-item>
                <el-button type="primary" @click="addProduct('0')">{{uid?'提交':'添加'}}</el-button>
                <!--<el-button type="success" @click="addProduct('1')" v-if="!uid">添加并发布</el-button>-->
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import upload from '@/components/common/Upload'
    import uploadList from '@/components/common/UploadList'
    import uploadv from '@/components/common/UploadV'
    import URL from '../../utils/baseUrl'

    export default {
        components: {
            upload,
            uploadList,
            uploadv,
        },
        data() {
            return {
                form: {
                    number: '',
                    nickName: '',
                    mobile: '',
                    age: '',
                    height: '',
                    weight: '',
                    bust: '',
                    type: '',
                    // head: 'http://yrncpublic.oss-cn-beijing.aliyuncs.com/upload/HN77yar6zJ.png',
                    head: '',
                    introduce:'',

                    // 服务项目列表
                    prices: [
                        {
                            price: '',
                            girlProjectVo: {
                                id: '',
                            }
                        },
                    ],
                    photos: [
                        // {
                        //     id: '',
                        //     photoUrl: '',
                        //     free: false,
                        //     payGold: '',
                        // },
                    ],
                    videoes: [
                        // {
                        //     id: '',
                        //     videoUrl: '',
                        //     free: false,
                        //     payGold: '',
                        // },
                    ],
                },
                projectList: [],
                showMedia: true,
            }
        },
        props: ['uid', 'str'],
        methods: {
            loadopen() {
                this.loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.2)'
                });
                setTimeout(() => {
                    this.loading.close();
                }, 5000);
            },
            loadclose() {
                this.loading.close();
            },
            // 获取服务项目
            getProjectList() {
                this.loadopen();
                this.config.post('/center/girl/getProject', {}).then(res => {
                    this.loadclose();
                    if (res.data.status === 1) {
                        this.projectList = res.data.data;
                    } else {
                        this.$message.error(this.config.handleError(res.data) || '');
                    }
                }).catch(err=>{
                    this.loadclose();
                    this.$message.error('网络错误');
                    this.$router.push('/login');
                })
            },
            // 增加服务项目
            pushPro() {
                this.form.prices.push({
                    price: '',
                    girlProjectVo: {
                        id: '',
                    }
                })
            },
            // 获取商品信息
            getInfo() {
                if (!this.uid) {
                    return;
                }
                this.loadopen();
                this.config.get('/center/girl/detail', {id: this.uid}).then(res => {
                    this.loadclose();
                    if (res.data.status === 1) {
                        // console.log(res.data, '获取角色信息');
                        this.form = res.data.data;
                        this.form.prices = res.data.data.prices;
                        // this.form.prices.girlProjectVo.id = res.data.data.prices.girlProjectVo.id || '';
                        this.form.photos = res.data.data.photos;
                        this.form.videoes = res.data.data.videoes;
                        // this.from.type = this.from.type.toString();
                    } else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                });
            },
            // 获取上传文件空间返回地址（1个）
            upCallback1(file){
                this.form.head = file;
            },
            // 获取上传文件空间返回地址（1个）
            upCallbackv(file){
                // this.form.videoes = file;
                this.form.videoes.push({
                    id: '',
                    videoUrl: file.rename,
                    free: false,
                    payGold: 0,
                });
            },
            // 获取上传文件控件返回的地址
            upCallback(file) {
                // this.form.imgList = 'https://dlhz.oss-cn-beijing.aliyuncs.com/'+url;
                // console.log(file, '是吗');
                this.form.photos.push({
                    id: '',
                    photoUrl: file.rename,
                    free: false,
                    payGold: 0,
                });
                this.showMedia = false;
                this.showMedia = true;
            },
            // 删除项
            del(v,index){
                this.form.photos.splice(index,1);
            },
            validate() {
                if (!this.form.number) {
                    this.$message.error('请填写编号');
                    return false;
                }
                if (!this.form.nickName) {
                    this.$message.error('请填写昵称');
                    return false;
                }
                return true;
            },
            // 添加商品
            addProduct(isIssue) {
                if (!this.validate()) return;
                let sarr = [];
                this.form.prices.forEach(item => {
                    if(item.price && item.girlProjectVo.id){
                        sarr.push(item);
                    }
                });
                let obj = {
                    id: this.uid,
                    number: this.form.number,
                    nickName: this.form.nickName,
                    mobile: this.form.mobile,
                    age: this.form.age,
                    height: this.form.height,
                    weight: this.form.weight,
                    bust: this.form.bust,
                    type: this.form.type,
                    head: this.form.head,
                    introduce:this.form.introduce,

                    prices: sarr,
                    photos: this.form.photos,
                    videoes: this.form.videoes,
                };
                let url = this.uid ? '/center/girl/update' : '/center/girl/save';
                this.loadopen();
                // 解决参数JSON对象后台不能接收报错400的问题
                this.config.post2(url, JSON.stringify(obj)).then(res => {
                    this.loadclose();
                    if (res.data.status === 1) {
                        this.$message.success(res.data.message);
                    } else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                    this.$emit('done', '');
                })
            },
            chang(v){
                console.log(v)
            }
        },
        mounted() {
            this.getProjectList();

            let obj = {
                number: 'A001',
                nickName: '妮妮',
                mobile: '18911111112',
                age: '22',
                height: '165',
                weight: '50',
                bust: '36',
                type: '1',
                head: 'http://yrncpublic.oss-cn-beijing.aliyuncs.com/upload/HN77yar6zJ.png',
                introduce: '我是可爱的小猫咪么么哒~',
                jsonGirl: '{"projects":[{"id":1,"projectPrice":"300"}],"photos":[],"videoes":[]}'
            }
        }
    }
</script>

<style scoped>
    .standardAdd {
        font-size: 1.5rem;
        vertical-align: middle;
        color: #2d8cf0
    }
</style>
